<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="16">
          <a-col :xxl="19" :xl="18" :lg="18" :md="24" :sm="24">
            <a-row :gutter="24">
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="单号">
                  <a-input v-model="queryParam.orderNo" placeholder="支持入库/物流/采购/调拨"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="仓库">
                  <a-input v-model="queryParam.warehouseName" placeholder="请输入仓库名称"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="公司">
                  <a-input v-model="queryParam.purchaseCompany" placeholder="请输入公司名称"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="组织">
                  <a-input v-model="queryParam.purchaseOrganization" placeholder="请输入组织名称"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="入库类型">
                  <j-dict-select-tag
                    v-model="queryParam.inboundType"
                    dictCode="inbound_type"
                    placeholder="请选择入库类型"
                  />
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="入库状态">
                  <j-dict-select-tag
                    v-model="queryParam.inboundStatus"
                    dictCode="inbound_status"
                    placeholder="请选择入库状态"
                  />
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="采购员">
                  <a-input placeholder="请输入采购员姓名" v-model="queryParam.purchaserName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="采购备注">
                  <a-input placeholder="请输入采购备注" v-model="queryParam.purchaseRemark"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="仓库SKU">
                  <a-input placeholder="请输入仓库SKU" v-model="queryParam.warehouseSku"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="产品名称">
                  <a-input placeholder="请输入产品名称" v-model="queryParam.productName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="7" :lg="10" :md="8" :sm="24">
                <a-form-item label="创建时间">
                  <a-range-picker
                    v-model="dateTimeRange"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                    show-time
                    @change="dateTimeChange"
                    style="width: 90%"
                  ></a-range-picker>
                </a-form-item>
              </a-col>
              <a-col :xl="2" :lg="4" :md="8" :sm="24">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                 <!-- <a-button type="danger" @click="printHandle" icon="reload" style="margin-left: 8px">打印测试</a-button>  -->
                </span>
              </a-col>
            </a-row>
          </a-col>
          <a-col :xxl="4" :xl="6" :lg="6" :md="24" :sm="24">
            <div class="card">
              <div class="card-content">
                <div>
                  <div>处理SKU件数<span style="font-weight: 500">（今日）</span></div>
                  <div>{{ skuModel.userReceivingCount || 0 }}</div>
                  <div>操作人：{{ skuModel.userName }}</div>
                </div>
                <div class="icon">
                  <img :src="userIcon" width="30px" height="25px" />
                </div>
              </div>
              <div class="card-bottom">注：该数据每日凌晨5:00重置</div>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="warehouseHandle('')" type="primary">扫码收货</a-button>
      <a-button type="primary" @click="handleExportXls('入库单表（记录商品入库全流程）')">导出数据</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div> -->
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :expandedRowKeys="expandedRowKeys"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        @expand="handleExpand"
      >
        <!-- 单号 -->
        <template slot="inboundOrderNoSlot" slot-scope="text, record">
          <div class="row">
            <label>入库：</label>
            <div class="content">
              <a @click="warehouseDetailHandle(record)">{{ record.inboundOrderNo }}</a>
            </div>
          </div>
          <div class="row">
            <label>物流：</label>
            <a-tooltip v-if="record.logisticsNo" placement="bottom">
              <template slot="title">
                 <div v-for="(logisticsNo,index) in (record.logisticsNo).split(',')" :key="index">{{logisticsNo}}</div>
              </template>
              <div class="text-overflow">{{record.logisticsNo}}</div>
            </a-tooltip>
          </div>
          <div class="row">
            <label>采购：</label>
            <div class="content">
              <a>{{ record.purchaseOrderNo }}</a>
              <span style="color: #1890ff" v-if="record.purchasingSource">&nbsp;[{{ record.purchasingSource }}]</span>
            </div>
          </div>
          <div class="row">
            <label class="content">调拨：</label>
            <div>{{ record.transferOrderNo }}</div>
          </div>
        </template>
        <!-- 仓库 -->
        <template slot="warehouseSlot" slot-scope="text, record">
          {{ record.warehouseType_dictText }}<span v-if="record.warehouseName">-{{ record.warehouseName }}</span>
        </template>
        <!-- 入库情况 -->
        <template slot="inboundTypeSlot" slot-scope="text, record">
          <div class="row"><label>计划：</label><div class="content">{{ record.planQty }}</div></div>
          <div class="row"><label>已收：</label><div class="content">{{ record.receivedQty }}</div></div>
          <div class="row"><label>未收：</label><div class="content">{{ record.unreceivedQty }}</div></div>
          <div class="row"><label>残次：</label><div class="content">{{ record.defectiveQty }}</div></div>
          <div class="row"><label>上架：</label><div class="content">{{ record.shelvedQty }}</div></div>
          <div class="row"><label>实点：</label><div class="content">{{ record.actualQty }}</div></div>
          <div class="row"><label>通过：</label><div class="content">{{ record.passedQty }}</div></div>
        </template>
        <!-- 入库状态 -->
        <template slot="inboundStatusSlot" slot-scope="text, record">
          <div :style="{ color: setInboundStatus(record.inboundStatus) }">{{ record.inboundStatus_dictText }}</div>
          <div v-if="record.inboundStatus === '5' || record.inboundStatus === '7'">
            <a-tag color="#FF0000" v-if="record.defectiveQty > 0">残次{{ record.defectiveQty }}</a-tag>
             <!-- 多货：已收数量 > 计划数量 -->
            <a-tag color="#722ed1" v-if="record.receivedQty > record.planQty"
              >多货{{ calculateGoodsNum(record,'more') }}</a-tag>
              <!-- 少货：已收数量 < 计划数量 -->
            <a-tag color="#F96500" v-if="(record.receivedQty < record.planQty)"
              >少货{{ calculateGoodsNum(record,'less') }}</a-tag>
          </div>
        </template>
        <!-- 其他信息 -->
        <template slot="otherSlot" slot-scope="text, record">
          <div class="row">
          <label>公司：</label>
          <j-ellipsis :value="record.purchaseCompany" width="260px"></j-ellipsis>
        </div>
        <div class="row">
          <label>组织：</label>
          <j-ellipsis :value="record.purchaseOrganization" width="260px"></j-ellipsis>
        </div>
        <div class="row">
          <label>采购员：</label>
          <j-ellipsis :value="record.purchaserName" width="260px"></j-ellipsis>
        </div>
        <div class="row">
          <label>采购单备注：</label>
          <j-ellipsis :value="record.purchaseRemark" width="260px" style="color: #ff0000"></j-ellipsis>
        </div>
        </template>
        <!-- 日期(最新) -->
        <template slot="arrivalTimeSlot" slot-scope="text, record">
          <div class="row">
            <label>创建：</label>
            <div class="content">{{ record.createTime }}</div>
          </div>
          <div class="row">
            <label>到仓：</label>
            <div class="content">{{ record.arrivalTime }}</div>
          </div>
          <div class="row">
            <label>收货：</label>
            <div class="content">{{ record.receiveTime }}</div>
          </div>
          <div class="row">
            <label>上架：</label>
            <div class="content">{{ record.shelvingTime }}</div>
          </div>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="warehouseHandle(record.id)">收货</a>
          <a-divider type="vertical" />
          <a><j-operate-log :id="record.id"></j-operate-log> </a>
        </span>
        <a-table
          slot="expandedRowRender"
          slot-scope="text"
          rowKey="id"
          :columns="innerColumns"
          :data-source="innerData"
          :pagination="false"
        >
          <!-- 图片 -->
          <template slot="productMainImgSlot" slot-scope="text, record">
            <span v-if="!record.productMainImg" style="font-size: 12px; font-style: italic">无图片</span>
           <viewer :images="record.productMainImg.split(',')" v-else >
            <img :src="record.productMainImg" width="40px" height="auto" />
           </viewer>
          </template>
          <!-- 产品名称 -->
          <template slot="productNameSlot" slot-scope="text, record">
            <div style="width:250px; text-align: left;white-space: break-spaces;">{{text}}</div>
          </template>
          <!-- 收货人/数量 -->
          <template slot="receivedUsersSlot" slot-scope="text, record">
             <div v-if="record.receivedUsers && record.receivedUsers.length>0">
               <div v-for="(item,index) in record.receivedUsers" :key="index">
                  <div class="receivedUser">
                    <j-ellipsis :value="item.receivedUserName" :length="15"></j-ellipsis>
                    <span v-if="item.receivedQty"> &nbsp; / &nbsp;{{item.receivedQty}} </span> </div>
               </div>
             </div>
          </template>
        </a-table>
      </a-table>
    </div>
    <inbound-product-list-model ref="modalForm" @ok="modalFormOk"></inbound-product-list-model>
    <warehouse-inbound-detail-modal ref="warehouseDetail"></warehouse-inbound-detail-modal>
    <!-- SKU打印标签右侧内容 -->
    <!-- <div ref="printArea" id="printArea" style="display:none">
      <div>
        <div style="font-size: 12pt; font-weight: bold;">961125</div>
        <div style="font-size: 8pt;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;height: 2.4em;line-height: 1.2em;margin:3px 0;">花洒淋浴头-枪灰色花洒+1.5米银管+银支架+彩盒(备注要彩盒)</div>
        <div style="font-size:8pt">RK25031700001-1</div>
      </div>
   </div> -->
  </a-card>
</template>
  
  <script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { getAction } from '@/api/manage'
import inboundProductListModel from './modules/inboundProductListModel'
import warehouseInboundDetailModal from './modules/warehouseInboundDetailModal'
import { getLodop } from "@/utils/lodopPrint"
export default {
  name: 'WarehouseInboundList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    inboundProductListModel,
    warehouseInboundDetailModal
  },
  data() {
    return {
      description: '入库单表（记录商品入库全流程）管理页面',
      dateTimeRange: [],
      skuModel: {
        userReceivingCount: 0,
      },
      // 表头
      columns: [
        {
          title: 'NO',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          width: 300,
          title: '单号',
          align: 'center',
          dataIndex: 'inboundOrderNo',
          scopedSlots: { customRender: 'inboundOrderNoSlot' },
        },
        {
          title: '仓库',
          align: 'center',
          dataIndex: 'warehouseName',
          scopedSlots: { customRender: 'warehouseSlot' },
        },
        {
          title: '入库类型',
          align: 'center',
          dataIndex: 'inboundType_dictText',
        },
        {
          title: '入库情况',
          align: 'center',
          dataIndex: 'inboundTypes',
          scopedSlots: { customRender: 'inboundTypeSlot' },
        },
        {
          title: '入库状态',
          align: 'center',
          dataIndex: 'inboundStatus',
          scopedSlots: { customRender: 'inboundStatusSlot' },
        },
        {
          width: 300,
          title: '其他信息',
          align: 'center',
          dataIndex: 'other',
          scopedSlots: { customRender: 'otherSlot' },
        },
        {
          width: 200,
          title: '日期(最新)',
          align: 'center',
          dataIndex: 'arrivalTime',
          scopedSlots: { customRender: 'arrivalTimeSlot' },
        },

        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 110,
          scopedSlots: { customRender: 'action' },
        },
      ],
      expandedRowKeys: [], //展开的行
      innerData: [], //子table数据源
      innerColumns: [
        {
          title: '图片',
          align: 'center',
          dataIndex: 'productMainImg',
          scopedSlots: { customRender: 'productMainImgSlot' },
        },
        {
          width:250,
          title: '产品名称',
          align: 'center',
          dataIndex: 'productName',
          scopedSlots: { customRender: 'productNameSlot' },
        },
        {
          title: '比例',
          align: 'center',
          dataIndex: 'componentRatio',
        },
        {
          title: '仓库sku',
          align: 'center',
          dataIndex: 'warehouseSku',
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'receiveStatus_dictText',
          customCell: (record, index) => {
            // 1.未收货,2.部分收货,3.收货完成 4.取消收货
            if (record.receiveStatus === '2') {
              return { style: { color: '#F96500' } }
            }
            if (record.receiveStatus === '3') {
              return { style: { color: '#1890FF' } }
            } else {
              return { style: { color: '#333333' } }
            }
          },
        },
        {
          title: '计划数',
          align: 'center',
          dataIndex: 'planQty',
        },
        {
          title: '已收数',
          align: 'center',
          dataIndex: 'receivedQty',
        },
        {
          title: '上架数',
          align: 'center',
          dataIndex: 'shelvedQty',
        },
        {
          title: '未收数',
          align: 'center',
          dataIndex: 'unreceivedQty',
        },
        {
          title: '残次数',
          align: 'center',
          dataIndex: 'defectiveQty',
        },
        {
          title: '实点数',
          align: 'center',
          dataIndex: 'actualQty',
        },
        {
          title: '通过数',
          align: 'center',
          dataIndex: 'passedQty',
        },
        {
          title: '是否质检',
          align: 'center',
          dataIndex: 'qcRequirement_dictText',
        },
        {
          width:250,
          title: '收货人/数量',
          align: 'center',
          dataIndex: 'receivedUsers',
          scopedSlots: { customRender: 'receivedUsersSlot' },
        },
        {
          title: '最新收货时间',
          align: 'center',
          dataIndex: 'updateTime',
        },
      ],
      userIcon: require('@/assets//u409.png'),
      url: {
        list: '/wms/inboundOrder/list',
        delete: '/wms/inboundOrder/delete',
        deleteBatch: '/wms/inboundOrder/deleteBatch',
        exportXlsUrl: '/wms/inboundOrder/exportXls',
        importExcelUrl: 'wms/inboundOrder/importExcel',
        getUserProductQuantity: '/wms/inboundOrder/getUserProductQuantity',
        inboundProductList: '/wms/inboundProduct/queryByInboundOrderId',
      },
      dictOptions: {},
      superFieldList: [],
    }
  },
  created() {
    this.getSuperFieldList()
  },
  mounted() {
    this.getSKUQuantity()
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    initDictConfig() {},
    //动态设置入库状态字体颜色
    setInboundStatus(status) {
      switch (status) {
        case '2': //在途
          return '#01921C'
        case '3': //部分到仓
          return '#F96500'
        case '4': //已到仓
          return '#F96500'
        case '5': //部分收货
          return '#3F16E6'
        case '6': //收货完成
          return '#1890FF'
        case '7': //强制完成
          return '#0022FF'
        default:
          return '#333333'
      }
    },
    //打印测试
    // printHandle(){
    //   const LODOP = getLodop();
    //     if (!LODOP) {
    //       alert("未检测到C-Lodop打印服务，请先安装！");
    //       return;
    //     }
    //       // 创建打印任务  
    //     LODOP.PRINT_INIT("标签打印");
    //     //LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE", 1);
    //     LODOP.SET_PRINT_PAGESIZE(1, '50mm', '20mm', ''); // 设置标签尺寸
    //     // 添加二维码（左侧）
    //     LODOP.ADD_PRINT_BARCODE(5, 5, 70, 70, "QRCode", '112541');
    //     // 添加文本内容（右侧）
    //     LODOP.ADD_PRINT_HTM(5,75,110,'100%', document.getElementById('printArea').innerHTML)
    //     // 打印预览
    //     LODOP.PREVIEW();
    //     //LODOP.PRINT();
    // },
    //创建时间
    dateTimeChange(value, dateString) {
      this.$set(this.queryParam, 'startTime', dateString[0])
      this.$set(this.queryParam, 'endTime', dateString[1])
    },
    //重置
    searchReset() {
      this.queryParam = {}
      this.dateTimeRange = []
      this.loadData(1)
    },
    //获取用户五点前处理的商品sku数量
    getSKUQuantity() {
      getAction(this.url.getUserProductQuantity).then((res) => {
        if (res.success) {
          this.skuModel = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //展开子table
    handleExpand(expanded, record) {
      if (expanded) {
        // 展开前先清空，在赋值，只展开一行
        this.expandedRowKeys = []
        this.expandedRowKeys.push(record.id)
        getAction(this.url.inboundProductList, { inboundOrderNoId: record.id }).then((res) => {
          if (res.success) {
            this.innerData = res.result || []
          } else {
            this.$message.warning(res.message)
          }
        })
      } else {
        this.expandedRowKeys = []
      }
    },
    //计算多货,少货数量
    //多货数量=已收数量-计划数量
    //少货数量=计划数量-已收数量-残次数量
    calculateGoodsNum(record,type){
      if(type === 'more'){
        const result = record.receivedQty - record.planQty
         return result > 0 ? result : 0
      }else{
        const result = record.planQty - record.receivedQty - record.defectiveQty
        return result > 0 ? result : 0
      }
    },
    //扫码收货
    warehouseHandle(id){
      this.$refs.modalForm.title = id?'收货':'扫码收货'
      this.$refs.modalForm.showModal(id)
    },
    //收货详情
    warehouseDetailHandle(record){
      this.$refs.warehouseDetail.showModal(record.id)
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'datetime', value: 'createTime', text: '创建日期' })
      fieldList.push({ type: 'string', value: 'inboundOrderNo', text: '入库单号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'purchaseOrderNo', text: '采购单号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'logisticsNo', text: '物流单号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'transferOrderNo', text: '调拨单号', dictCode: '' })
      fieldList.push({ type: 'datetime', value: 'arrivalTime', text: '到仓时间' })
      fieldList.push({ type: 'datetime', value: 'receiveTime', text: '收货时间' })
      fieldList.push({ type: 'datetime', value: 'shelvingTime', text: '上架时间' })
      fieldList.push({ type: 'string', value: 'purchaserName', text: '采购员姓名', dictCode: '' })
      fieldList.push({ type: 'string', value: 'purchaseCompany', text: '采购公司', dictCode: '' })
      fieldList.push({ type: 'string', value: 'purchaseOrganization', text: '采购组织', dictCode: '' })
      fieldList.push({ type: 'string', value: 'purchasingSource', text: '采购渠道', dictCode: '' })
      fieldList.push({ type: 'Text', value: 'purchaseRemark', text: '采购备注', dictCode: '' })
      fieldList.push({ type: 'string', value: 'warehouseName', text: '仓库名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'inboundType', text: '入库类型', dictCode: 'inbound_type' })
      fieldList.push({ type: 'string', value: 'inboundStatus', text: '入库状态', dictCode: 'inbound_status' })
      this.superFieldList = fieldList
    },
  },
}
</script>
  <style lang="less" scoped>
@import '~@assets/less/common.less';
/deep/.ant-col-xxl-4 {
  float: right;
}
.layout.mobile .ant-layout-content .content{
  margin: 0;
}
/deep/.table-page-search-wrapper .ant-form-inline .ant-form-item {
  margin-bottom: 20px;
}
/deep/.ant-tag {
  font-size: 10px;
}
.card {
  padding: 10px;
  border-radius: 4px;
  background-image: linear-gradient(to top, #f6f9ff, #c6dcf5);
  border: 1px solid #d9d9d9;
  .card-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    div:nth-child(1) {
      div:nth-child(1) {
        font-weight: 700;
        font-size: 17px;
        color: #888888;
      }
      div:nth-child(2) {
        color: #333;
        font-size: 24px;
        font-weight: bold;
      }
    }
    .icon {
      width: 55px;
      height: 55px;
      background: #296db7;
      border-radius: 50%;
      line-height: 52px;
      text-align: center;
      box-shadow: 0 0 0 5px #b2cdeb;
    }
  }
  .card-bottom {
    font-size: 12px;
    color: #949494;
    margin-top: 15px;
  }
}
.row {
  display: flex;
  // label {
  //   float: left;
  // }
  a {
    text-decoration: underline;
  }
  .content{
   text-align: left;
   white-space: break-spaces;
  }
  .logisticsNo {
    //width: 200px;
    // height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .text-overflow{
  width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  text-align: left;
}
}
.receivedUser{
  display: flex;
  width: 100%;
  justify-content: center;
}
</style>